<template>
  <el-dialog title="导入线索" :visible.sync="importCus.dialogVisible" width="750px" class="import-dialog" @closed="importClosed">
    <el-steps :active="importCus.step_active" simple process-status="wait" style="margin-bottom: 15px;">
      <el-step title="上传文件" icon="el-icon-folder-add"></el-step>
      <el-step title="导入数据" icon="el-icon-upload"></el-step>
      <el-step title="导入完成"></el-step>
    </el-steps>

    <div v-show="importCus.step_active < 2" class="step-section">
      <div class="sections">
        <div class="sections__title">一、请按照数据模板的格式准备要导入的数据。<span class="download" @click="downloadTemplate">点击下载《线索导入模板》</span></div>
        <div class="sections__tips">导入文件请勿超过2MB（约10,000条数据）</div>
      </div>
      <div class="sections">
        <div class="sections__title">二、选择线索来源</div>
        <div class="content" style="width: 500px;">
          <el-select v-model="importCus.form.clue_source_dict_value" size="small" filterable placeholder="请选择" style="width: 375px;">
            <el-option v-for="item in importCus.clueSourceList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
          </el-select>
        </div>
      </div>
      <div class="sections">
        <div class="sections__title">三、输入线索名称</div>
        <div class="content" style="width: 415px;">
          <el-input v-model="importCus.form.clue_name" size="small"></el-input>
        </div>
      </div>
      <div class="sections">
        <div class="sections__title">四、请选择需要导入的文件</div>
        <div class="content" style="width: 500px;">
          <el-input v-model="importCus.file.name" size="small" disabled>
            <el-upload
              ref="uploadFile"
              slot="append"
              :limit="1"
              :action="importCus.uploadFileUrl"
              :show-file-list="false"
              :file-list="importCus.fileList"
              :on-error="handleUploadError"
              :on-exceed="handleExceed"
              :on-success="handleUploadSuccess"
              :headers="importCus.headers"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-input>
        </div>
      </div>
    </div>
    <div
      v-show="importCus.step_active > 1"
      v-loading="importCus.loading"
      class="step-section el-loading-parent--relative"
      element-loading-text="数据导入中"
      element-loading-spinner="el-icon-loading"
    >
      <el-result v-if="importCus.step_active === 3" :icon="importCus.result.status" :sub-title="importCus.result.msg" class="result-info"></el-result>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button v-if="importCus.step_active < 2" type="primary" @click="sumbitImport">导入</el-button>
      <el-button v-else type="primary" @click="importCus.dialogVisible = false">确定</el-button>
      <el-button @click="importCus.dialogVisible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getToken } from "@/utils/auth";
import { saveImportsUser } from "@/api/crm/customer";
import { listData } from "@/api/vadmin/system/dict/data";
export default {
  name: "ImportCostomer",
  data() {
    return {
      importCus: {
        dialogVisible: false,
        form: {
          clue_name: "",
          clue_source_dict_value: "",
          file_url: ""
        },
        step_active: 0,
        file: {},
        uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin/system/savefile/",
        headers: {
          Authorization: "Bearer " + getToken()
        },
        fileList: [],
        loading: false,
        clueSourceList: [],
        result: {
          msg: "数据导入成功",
          status: "success"
        }
      }
    };
  },
  methods: {
    open() {
      this.importCus.dialogVisible = true;
      this.getDictDataList();
    },
    importClosed() {
      Object.assign(this.importCus, this.$options.data().importCus);
      this.$emit("change");
      this.$store.dispatch("settings/setLoadClueTime", new Date());
    },
    downloadTemplate() {
      window.location.href = "/template/customer_import.xls";
    },
    // 文件个数超出
    handleExceed() {
      this.$message.error(`只允许上传单个文件`);
    },
    // 上传失败
    handleUploadError() {
      this.$message.error("上传失败, 请重试");
    },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      if (res.code === 200) {
        this.$message.success("上传成功");
        this.importCus.file = res.data;
        this.importCus.form.file_url = res.data.file_url;
        this.importCus.step_active++;
      } else {
        this.$refs["uploadFile"].clearFiles();
        this.$message.error(res.msg);
      }
    },
    sumbitImport() {
      const { clue_source_id, file_url } = this.importCus.form;
      if (clue_source_id === "") {
        this.$message.warning("请选择线索来源");
        return;
      } else if (file_url === "") {
        this.$message.warning("请选择上传文件");
        return;
      }

      this.importCus.step_active++;
      this.importCus.loading = true;
      saveImportsUser(this.importCus.form).then(this.importsUserResponseHeadle).catch(this.importsUserResponseHeadle);
    },
    importsUserResponseHeadle(response) {
      const { code, msg } = response;
      this.importCus.step_active++;
      this.importCus.loading = false;
      if (code !== 200) {
        this.importCus.result.msg = msg;
        this.importCus.result.status = "error";
      }
    },
    /** 查询字典数据列表 */
    getDictDataList() {
      listData({ dictType: "crm_customer_clue_source", status: 1, pageNum: "all" }).then((response) => {
        this.importCus.clueSourceList = response.data;
      });
    }
  }
};
</script>

<style lang="scss" scoped>

.file_style {
  ::v-deep .el-upload-dragger {
    width: 412px !important;
  }
}

::v-deep .el-step.is-simple .el-step__title {
  font-size: 14px !important;
}

::v-deep .el-step__title.is-wait {
  color: #7a869a;
}

.step-section {
  min-height: 300px;
  position: relative;
}

.sections {
  font-size: 14px;
  color: #172b4d;

  .download {
    cursor: pointer;
    color: #0052cc;
  }
  .sections__title {
    font-weight: 600;
  }

  .sections__tips {
    padding-left: 30px;
    margin: 8px 0 15px;
    color: #6b778c;
    font-size: 12px;
    line-height: 1.4;
  }

  .sections__tips + .content {
    padding-top: 0;
  }

  .content {
    padding: 10px 10px 10px 30px;
  }
  ::v-deep .el-input-group__append, .el-input-group__prepend{
    background-color: #623edf;
    border-color: #623edf;
    color: #FFF;
  }
}

.import-dialog {
  ::v-deep .el-dialog__body {
    height: 400px;
  }
}

.result-info{
    text-align: center;
    padding-top: 80px;
}
</style>
